<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cookie.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <style>
        body{
            background-color: rgb(248, 248, 248);
        }
        .tab{
            width: 1350px;
            margin: auto;
            background-color: white;
        }
        .img_1{
            width: 300px;
            height: 75px;
            margin: 10px 0 20px 100px;
        }
        .tab tr td{
            margin:  auto;
            text-align: center;
        }
        .tab_1 td input{
            margin-left: 20px;
        }
        .tab_1{
            height: 200px;
        }
        .num{
            width: 1350px;
            height: 100px;
            margin: auto;
            margin-top: 50px;
            background-color: white;
        }
        .num h1{
            float: right;
            margin-top: 30px;
            margin-right: 66px;
        }
    </style>
</head>

<body>
    <div id="app">
    <div class="header">
        <div class="header-left">
            <div class="logo" style="border-top: 0px;">
                <img src=" ./img/logo.png" alt="">
            </div>
            <div class="location" style="border-top: 0;">
                <a href="#">
                    <span>上海市</span>
                </a>
            </div>
            <div class="products">
                <a href="#">
                    <span>所有产品</span>
                </a>
            </div>
            <div class="home">
                <a href="././sy/cookie.html">
                    <span>首页</span>
                </a>
            </div>
            <div class="cakes">
                <a href="cake.html">
                    <span>蛋糕</span>
                </a>
            </div>
            <div class="breads">
                <a href="#">
                    <span>面包</span>
                </a>
            </div>
            <div class="snacks">
                <a href="snack.html">
                    <span>小食</span>
                </a>
            </div>
            <div class="bds">
                <a href="test.html">
                    <span>企业专区</span>
                </a>
            </div>
        </div>
        <div class="header-right">
            <div class="login-header">
                <span class="head-span">
                    <a href="register.html">
                        <span class="zhuce">注册</span>
                    </a>
                    &nbsp;|&nbsp;
                    <a href="Login.html">
                        <span class="login">登录</span>
                    </a>
                </span>
            </div>
            <div class="mycar">
                <a href="./ShoppingCart.html">
                    <img class="car" src="./img/bag1.png" alt="">
                </a>

            </div>
            <div class="activity">
                <a href="">
                    <img class="icon2" src="./img/icon02.png" alt="">
                </a>

            </div>
        </div>
    </div>
    <div style="height: 100px;"></div>

    <table class="tab">
        <img class="img_1" src="./img/mycart.png" alt="">
        <tr class="tab_1" style="height: 100px;">
            <td><input type="checkbox"  id="all" onclick="all_check()">全选</td>
            <td>图片</td>
            <td>名称</td>
            <td>kg</td>
            <td>日期</td>
            <td>数量</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        <tr class="tab_1" v-for="(d,index) in gwc" :key="d.id">
            <td><input type="checkbox" v-model="deleteList" v-bind:value="d.id" name="ic" onclick="single_check()"></td>
            <td><img :src="getImgUrl(d.img)" width="150px"></td>
            <td><h3>{{d.name}}</h3></td>
            <td style="color: rgb(115, 115, 115);">{{d.kg}}</td>
            <td style="color: rgb(115, 115, 115);">{{d.date}}</td>
            <td>
                <input type="button" value="+" onclick="add(this)">
                <input style="text-align: center;" type="text" value="1" size="3">
                <input type="button" value="-" onclick="jian(this)">
            </td>
            <td><h3>￥{{d.k.price}}</h3></td>
            <td><button @click="del(d,index)" style="border: none; width: 50px;height: 20px;">删除</button></td>
            <td><form action="http://127.0.0.1:1234/pay/alipay">
                <input type="hidden" :value="d.price" name="price">
                <input type="hidden" :value="d.name" name="name">
                <button type="submit" @click="del(d,index)">提交</button>
            </form></td>
        </tr>
    </table>
    <div class="num"><h1>合计:{{priceNum}}</h1>                            
        <form action="http://127.0.0.1:1234/pay/alipay">
            <input type="hidden" :value="priceNum" name="price">
            <input type="hidden" :value="nameStr" name="name">
            <button type="submit" @click="btnDelete">支付</button>
        </form>
    </div>

    <!-- <div style="
    height: 600px;
    background-color: #d1d1d1;
    text-align: center;
    ">
        <img style="margin-top: 160px;" src="./img/gouwuchetop.png" alt="">
        <p style="margin-top: 40px; font-size: 30px; color: rgb(255, 255, 255); margin-bottom: 40px;">你的购物车还是空的哦，赶紧行动吧！
        </p>
        <p
            style="background-color: rgb(255, 255, 255);margin: auto; width: 150px; height: 40px;line-height: 40px; border-radius: 20px;">
            <a href="./sy/cookie.html">立即挑选</a>
        </p>
    </div> -->

    <div style="width: 1280px;
    margin: auto;">
        <p style="height: 90px; line-height: 90px; font-size: 20px;font-weight: 700;">为您推荐</p>

        <div class="tuijianneirong">

            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/14.jpg" alt="">
                </div>
                <p>花样 年华</p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥298</span>
                    <a href=""><img src="./img/car1.png" alt=""></a>
                </div>
            </div>
            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/4.jpg" alt="">
                </div>
                <p>卢克和咚咚冰淇淋蛋糕</p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥298</span>
                    <a href=""><img src="./img/car1.png" alt=""></a>
                </div>
            </div>
            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/29.jpg" alt="">
                </div>
                <p>浓巧·迷情冰淇淋蛋糕</p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥298</span>
                    <a href=""><img src="./img/car1.png" alt=""></a>
                </div>
            </div>
            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/20.jpg" alt="">
                </div>
                <p>安逸兔 </p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥318</span>
                    <a href=""><img src="./img/car1.png" alt=""></a>
                </div>
            </div>
            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/21.jpg" alt="">
                </div>
                <p>黛西的旅行</p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥318</span>
                    <a href=""><img src="./img/car1.png" alt=""></a>
                </div>
            </div>
            <div class="gouwuchetuijian">
                <div>
                    <img style="width: 160px;" src="./img/1 (5).jpg" alt="">
                </div>
                <p>蔓越莓红丝绒</p>
                <div style="display: flex;  justify-content:space-between;">
                    <span>￥298</span>
                    <a href="">
                        <img src="./img/car1.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
        <script type="text/javascript">
        function all_check() {
            var oInput = document.getElementsByName("ic");
            for (var i = 0; i < oInput.length; i++) {
                if (document.getElementById("all").checked == true) {
                    oInput[i].checked = true;
                } else {
                    oInput[i].checked = false;
                }
            }
        }

      function single_check() {
        var oInput = document.getElementsByName("ic");
        var j = 0;
        for (var i = 0; i < oInput.length; i++) {
          if (oInput[i].checked == true) {
            j = j + 1;
          }
        }

        if (j == oInput.length) {
          document.getElementById("all").checked = true;
        } else {
          document.getElementById("all").checked = false;
        }
      }

      //1.点击按钮加
      function add(btn){
        var obj = btn.nextElementSibling;
        var val = obj.value;
        val++;
        if(val>10){
            alert("商品数量不够！");
            return false;
        }else{
            obj.value=val;
        }
      }
      //2.点击按钮减
      function jian(btn){
        var obj = btn.previousElementSibling;
        var val = obj.value;
        val--;
        if(val < 1){
            alert("商品数量不能小于1！");
            return false;
        }else{
            obj.value=val;
        }
      }

        const vm = new Vue({
            el: "#app",
            data: {
                gwc:[],
                deleteList: [],
                d: {
                    name:"",
                    kg:"",
                    k:{price:""}
                },
                priceNum: 0,
                nameStr:""
            },

            mounted() {
                this.StuN();
                },

            methods:{
                //叠加总计
                getPriceNum() {
                    console.log(this.gwc.length)
                    console.log(this.gwc)
                    for (let index = 0; index < this.gwc.length; index++) {
                        this.priceNum = this.priceNum += Number(this.gwc[index].price)
                        console.log(this.gwc[index].price)
                    }
                    console.log(this.priceNum)
                },
                getName() {
                    for (let index = 0; index < this.gwc.length; index++) {
                        this.nameStr = this.nameStr += this.gwc[index].name + ","
                        console.log(this.gwc[index].name)
                    }
                    console.log(this.nameStr)
                },

                /**显示*/
                StuN() {
                    axios
                        .post("http://127.0.0.1:1234/Gwc/spper", this.d)
                        .then((response) => {
                            this.gwc = response.data;
                            console.log(this.d);
                            this.getPriceNum();
                            this.getName();
                    });
                },

                      //删除
                      del(d, index) {
                    console.log(d, index);
                    axios.delete(`http://127.0.0.1:1234/Gwc/${d.id}`)
                        .then(response => {
                            if (response.data === 1) {
                                vm.gwc.splice(index, 1);
                            }
                        }).catch(err => {
                        alert(err);
                    })
            },
                        //批量删除
                        btnDelete() {
                            console.log(this.deleteList);
                                axios.delete("http://127.0.0.1:1234/Gwc/Btndelete?ids=" + this.deleteList)
                                    .then(response => {
                                    let resData = response.data;
                                    console.log(resData);
                                    this.deleteList = [];
                                    this.gwc = [];
                                    this.StuN();
                                })
                        },

            getImgUrl(name){
                return "/image/"+name
            },
        },


        })
        </script>
</body>

</html>